<template>
  <div class="app">
    <button @click="openDialog">退出按钮</button>
    <button @click="startEdit">编辑按钮</button>
    <button @click="testColor">查看颜色指令效果</button>
    <button @click="slotTest1">查看插槽效果1</button>
    <button @click="slotTest2">查看插槽效果2</button>
    <BaseDialog :visible.sync="dialogVisible"></BaseDialog>
    <EditForm :visible.sync="editVisible"></EditForm>
    <ColorDirectiveTest :visible.sync="colorVisible"></ColorDirectiveTest>
    <MyDialog :visible.sync="slotVisible1">
      <template #header>
        <div>提示</div>
      </template>
      <template #body>
        <div>确认要退出系统吗？</div>
      </template>
      <template #footer>
        <div>退出</div>
      </template>
    </MyDialog>
    <MyDialog :visible.sync="slotVisible2">
      <template #header>
        <div>提示</div>
      </template>
      <template #body>
        <div>确认要删除吗？</div>
      </template>
      <template #footer>
        <div>退出</div>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import BaseDialog from "./components/base/BaseDialog"
import EditForm from "@/components/base/EditForm.vue";
import ColorDirectiveTest from "@/components/test/ColorDirectiveTest.vue";
import MyDialog from "@/components/MyDialog.vue";
export default {
  data() {
    return {
      dialogVisible: false,
      editVisible: false,
      colorVisible: false,
      slotVisible1: false,
      slotVisible2: false,
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    startEdit() {
      this.editVisible = true
    },
    testColor() {
      this.colorVisible = true
    },
    slotTest1() {
      this.slotVisible1 = true
    },
    slotTest2() {
      this.slotVisible2 = true
    }
  },
  components: {
    MyDialog,
    ColorDirectiveTest,
    BaseDialog,
    EditForm,
  },
}
</script>

<style>
</style>